<template>
	<view class="container">
		<view class="container-left">
			<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
				<view class="left-navbar"v-for="(mclassitem,mclassindex) in mainClasslist" :key="mclassitem.id" :class="{'active':activeMainclass==mclassindex}" @tap="changeMainclass(mclassindex)">
					<text>{{mclassitem.name}}</text>
				</view>
			</scroll-view>
		</view>
		<view class="container-right">
			<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scrolltolower="getSecondclass()">
				<view class="scroll-view-list">
					<view class="scroll-view-item" v-for="(sclassitem,sclassindex) in secondClasslist" :key="sclassitem.id">
						<u-icon :name="url+sclassitem.img" size="40"></u-icon>
						<text>{{sclassitem.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {url,classList} from '@/apis/request.js'
	export default {
		data() {
			return {
				activeMainclass:0,
				mainClasslist:[],
				secondClasslist:[],
				pageIndex:1,
				pageSize:26,
				url:''
			};
		},
		created() {
			this.url=url;
			this.getMainClass();
		},
		onLoad() {
			
		},
		methods:{
			getMainClass(){
				this.$http({
					url:classList,
					method:"GET",
					data:{
						superiorId:0
					},
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					console.log(res,'分类');
					if(res[1].data.status=='200')
					{
						this.mainClasslist=res[1].data.data;
						this.getSecondclass(0);
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			getSecondclass(classindex){
				this.$http({
					url:classList,
					method:"GET",
					data:{
						superiorId:this.mainClasslist[classindex].id,
						pageIndex:this.pageIndex,
						pageSize:this.pageSize
					},
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					console.log(res,'小分类');
					if(res[1].data.status=='200'){
						this.secondClasslist=res[1].data.data;
						this.pageIndex++;
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			changeMainclass(mainindex){
				this.activeMainclass=mainindex;
				this.pageIndex=1;
				this.getSecondclass(mainindex);
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 height: 100%;
		 display: flex;
		 .container-left{
			 width: 180rpx;
			 height: 100%;
			 background-color: #F1F1F1;
			 .left-navbar{
				 width: 100%;
				 height: 80rpx;
				 text-align: center;
				 font-size: 30rpx;
				 color: #222222;
				 line-height: 80rpx;
			 }
		 }
		 .container-right{
			 width:570rpx;
			 height: 100%;
			 background-color: #F4F8FB;
			 .scroll-view-list{
				 width: 540rpx;
				 min-height: 100%;
				 margin: auto;
				 .scroll-view-item{
					 width: 140rpx;
					 height: 100rpx;
					 margin-top: 50rpx;
					 float: left;
					 margin-left: 30rpx;
					 display: flex;
					 flex-direction: column;
					 justify-content: space-between;
					 align-items: center;
					 font-size: 25rpx;
				 }
			 }
		 }
		 .active{
			 background-color: #4898FF;
			 color: #FFFFFF !important;
		 }
	 }
</style>
